<template>
  <div>
    <div class="login-container">
      <div style="width:350px" class="login-box">
        <div style="font-size: 24px; font-weight:bold;text-align: center;margin-bottom: 30px">注册</div>
        <el-form :model="data.form" ref="formRef" :rules="rules">
          <el-form-item prop="name">
            <el-input prefix-icon="User" v-model="data.form.name" placeholder="请输入姓名"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password prefix-icon="Lock" v-model="data.form.password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item prop="role">
            <el-select v-model="data.form.role" placeholder="请选择角色">
              <el-option label="普通用户" value="普通用户"></el-option>
              <el-option label="管理员" value="管理员"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="sex" label="性别">
            <el-radio-group v-model="data.form.sex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="address">
            <el-input prefix-icon="Location" v-model="data.form.address" placeholder="请输入地址"/>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input prefix-icon="Phone" v-model="data.form.phone" placeholder="请输入手机号码"/>
          </el-form-item>
          <el-form-item prop="email">
            <el-input prefix-icon="Mail" v-model="data.form.email" placeholder="请输入邮箱"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="register">注册</el-button>
          </el-form-item>
        </el-form>
        <div style="margin-top: 30px; text-align: right">已有账号？请<a href="/login">登录</a></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import request from '@/utils/request';
import { ElMessage } from "element-plus";
import router from "@/router";

const data = reactive({
  form: {
    name: '',
    password: '',
    role: '',
    sex: '男',
    address: '',
    phone: '',
    email: ''
  }
});

const rules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  address: [
    { required: true, message: '请输入地址', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
});

const formRef = ref();

const register = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      request.post('/register', data.form).then(res => {
        if (res.code === '200') {
          ElMessage.success("注册成功");
          router.push('/login'); // 跳转至登录页
        } else {
          ElMessage.error(res.msg);
        }
      });
    }
  });
};
</script>

<style scoped>
.login-container {
  min-height: 80vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-image: url("@/assets/imgs/bg1.png"); */
  /* background-size: cover; */
}

.login-box {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #ddd;
  padding: 30px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, .8);
}
</style>
